<template>
  <el-dialog
    :width="'calc('+modelWidth+' - 24px)'"
    :destroy-on-close="true"
    :visible="visible"
    @close="$emit('close')"
  >
    <span slot="title">跳转到...</span>
    <div>
      <div style="max-height: 55vh; overflow-y: auto; width: 100%;">
        <div style="width: 100%; text-align: center; padding: 0">
          <el-button
            v-for="(ans, i) in answersInit"
            :key="i"
            style="margin: 4px; min-width: 3em;font-size:14px;padding:6px"
            size="mini"
            round
            plain
            :type="((i!=0&&answersInit[i]==''&&answersInit[i-1]=='')?'info':((answersInit[i]==content[sequence[i]].key||answersInit[i]==letters[content[sequence[i]].key])?'success':((answersInit[i]!=''&&answersInit[i]!=content[sequence[i]].key&&answersInit[i]!=letters[content[sequence[i]].key])?'danger':'primary')))"
            :disabled="(i!=0&&answersInit[i]==''&&answersInit[i-1]=='')"
            @click="handleClick(i)"
          >
            {{ content[sequence[i]].idx }}
        </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "jumper",
    props: ["content","answersInit","sequence","visible"],
    components: {},
    data() {
      return {
        letters: [
          "A",
          "B",
          "C",
          "D",
          "E",
          "F",
          "G",
          "H",
          "I",
          "J",
          "K",
          "L",
          "M",
          "N",
        ],
      };
    },
    computed: {
      modelWidth() {
        return this.$store.state.style.modelWidth;
      }
    },
    methods: {
      handleClick(index) {
        if (
          index != 0 &&
          this.answersInit[index] == "" &&
          this.answersInit[index - 1] == ""
        ) {
          console.log("jumping forbided: " + index);
          return false;
        }
        console.log("jumping: " + index);
        this.$emit("jump", index);
      },
    },
  };
</script>

<style scoped>
  @import "../style/workoutViewIndra.css";
</style>